<template>
	<div class="test-dialog-wrap">
		<el-button @click="open()">弹窗</el-button>
		<base-dialog ref="testDialogRef" title="哈哈" :before-close="beforeClose" top="1vh">
			<div class="test-dialog-content">
				<div class="element-list">
					<div class="element-item" v-for="(item,index) in 100" :key="index">
						第{{item}}个元素
					</div>
				</div>
			</div>
		</base-dialog>
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	const testDialogRef = ref()
	const open = () => {
		ElMessage('开启弹窗')
		testDialogRef.value.open()
	}
	const beforeClose = (doneFn) => {
		console.log('before close');
		doneFn()
	}
</script>

<style scoped>
	.test-dialog-content{
		max-height: 400px;
		overflow-y: auto;
	}
</style>